<template>
    <div class="home">
		<div class="banner">
			<Swiper :imgs="banner"></Swiper>
		</div>
		<div class="content">
			<div class="nav clearfix">
				<div @click="$router.push('/company')">
					<img src="../assets/images/Appicon1.png" alt="">
				</div>
				<div @click="$router.push('/app')">
					<img src="../assets/images/Appicon2.png" alt="">
				</div>
			</div>
			<div class="enterpriseConsulting">
				<h2>企业咨询</h2>
				<p>Corporate Information</p>
			</div>
			<ul>
				<li @click="$router.push('/information')" v-for="(item,index) in data">
					<img :src="item.src" alt="">
					<p>{{item.title}}</p>
					<span>{{item.date}} {{item.time}}</span>
				</li>
			</ul>
		</div>
		<div class="foot clearfix">
			<div @click="$router.push('/orderList')"><span><i class="iconfont icon-dingdan dingdanI"></i>下单</span></div>
			<div @click="$router.push('/orderGoods')"><span><i class="iconfont icon-wode"></i>我的订单</span></div>
			<div @click="$router.push('/set')"><span><i class="iconfont icon-gongnengfuwu"></i>设置偏好</span></div>
		</div>
    </div>
</template>

<script>
import Swiper from '../components/swiper.vue';
export default {
    name: 'home',
    components:{Swiper},
    data(){
    	return{
    		mySwiper:"",
    		banner:["./static/images/detailban1.png","./static/images/1.jpg","./static/images/detailban2.png","./static/images/1.jpg"],
    		data:[
    			{
    				src:"./static/images/zixun.png",
    				title:"金柚网&打零工：2016用工前沿论坛落幕，“零工经济”成为新亮点",
    				date:"2016-08-29",
    				time:"08:48"
    			},
    			{
    				src:"./static/images/zixun.png",
    				title:"金柚网&打零工：2016用工前沿论坛落幕，“零工经济”成为新亮点",
    				date:"2016-08-29",
    				time:"08:48"
    			},
    			{
    				src:"./static/images/zixun.png",
    				title:"金柚网&打零工：2016用工前沿论坛落幕，“零工经济”成为新亮点",
    				date:"2016-08-29",
    				time:"08:48"
    			}
    		]
    	}
    },
    methods:{},
}
</script>

<style scoped>
.home{
	padding-top: 8px;
}
.content{
	padding: 16px 12px 40px;
}
.nav div {
	width: 48%;
	height: 72px;
	border-radius: 4px;
	float: left;
	position: relative;
}
.nav div img{
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.nav div:nth-child(2){
	float: right;
}
.enterpriseConsulting{
	text-align: center;
	margin-top: 16px;
	margin-bottom: 20px;
}
.enterpriseConsulting h2{
	width: 240px;
	height: 18px;
	line-height: 18px;
	font-size: 14px;
	font-weight: normal;
	margin: 0 auto;
	border-bottom: 1px solid #333;
}
.enterpriseConsulting p{
	width: 200px;
	height: 18px;
	line-height: 18px;
	font-size: 13px;
	color: #ccc;
	background-color: #F7F7F7;
	margin: -5px auto 0;
}
ul li{
	height: 88px;
	font-size: 12px;
	color: #656565;
	background-color: #fff;
	padding: 8px;
	padding-left: 115px;
	padding-right: 20px;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 12px;
}
ul li img{
	width: 100px;
	height: 78px;
	position: absolute;
	left: 5px;
	top: 5px;
}
ul li p {
	word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
ul li span{
	color: #999;
	display: inline-block;
	margin-top: 10px;
}
.foot{
	width: 100%;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 3;
}
.foot div{
	width: 33.33%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	float: left;
}
.foot div span{
	width: 80px;
	font-size: 14px;
	color: #656565;
	display: inline-block;
	padding-left: 8px;
	margin:0 auto;
}
  .foot div span i:before{font-weight: bold;}
  .foot div span .dingdanI:before{font-weight: 100;}
</style>
